<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        div {
            width: 200px;
            height: 200px;
            margin: 50px;
            background-color: #6ff;
        }
    </style>
</head>

<body>
    <div id="box">
        <span>11111</span>
    </div>
</body>
<script>

    // 元素节点的属性(特性)
    // 1. 所有的节点都是对象类型  -> html元素(元素节点)  -> 对象类型
    // 2. 对象是对一个或一类事物特征(属性)和行为(方法)的描述  -> html元素也有自身的属性和方法 (语法:Element.xxx) 

    // 元素节点的属性: 元素本身携带的属性(内置属性 特性)


    var div = document.querySelector("div");
    // console.log(div, typeof div);


    // style    获取和设置元素行内样式
    // 获取
    // console.log(div.style);  // 返回一个css属性的对象(获取内联)
    // console.log(div.style.width);  // 返回一个css属性的对象(获取内联)
    // console.log(div.style.height);  // 返回一个css属性的对象(获取内联)


    // 获取非行内样式 (内部样式 外部样式 其实此方法也可以获取内联样式 默认)

    // 常规浏览器写法
    // window.getComputedStyle(ele)   传入一个html元素 -> 返回一个css属性形成的对象 (内部样式 外部样式 内联样式 默认的最终结果)
    // console.log(window.getComputedStyle);
    // console.log(window.getComputedStyle(div));
    // console.log(window.getComputedStyle(div).width);
    // console.log(window.getComputedStyle(div)["height"]);


    // IE低版本  没有window.getComputedStyle; 取值 => undefined 再调用会报错
    // console.log(div.currentStyle);  //元素的内置属性 currentStyle 返回一个css属性形成的对象
    // console.log(div.currentStyle.width);
    // console.log(div.currentStyle["height"]);

    // 兼容写法
    // if (window.getComputedStyle) { // 常规浏览器 取值=> 有该方法 -> true
    //     console.log(window.getComputedStyle(div).width)
    // } else {  // IE低版本(8) 没有这个方法 -> undefined -> false
    //     console.log(div.currentStyle.width);
    // }

    // 封装

    console.log(getStyle(div, "width"));
    console.log(getStyle(div, "height"));

    console.log(parseInt(getStyle(div, "width")));
    console.log(parseInt(getStyle(div, "height")));

    function getStyle(ele, key) {
        if (window.getComputedStyle) { // 常规浏览器 取值=> 有该方法 -> true
            return window.getComputedStyle(ele)[key];  // ["width"]
        } else {  // IE低版本(8) 没有这个方法 -> undefined -> false
            return ele.currentStyle[key];
        }
    }








</script>

</html>